<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>一生运势</title>
  <script src="../assets/vue.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://ad.aicebar.com/public/lib/css/style.css" />
  <link rel="stylesheet" href="../css/comm.css">
  <link href="https://ad.aicebar.com/public/lib/css/vant.min.css" rel="stylesheet">
  <script src="https://ad.aicebar.com/public/lib/js/vant.min.js"></script>
  <style>
    .box {
      width: 100%;
      /* padding: .24rem; */
      border-radius: .16rem;
    }

    .van-tabs__nav {
      background-color: transparent;
    }

    .van-tab__text {
      font-size: .28rem;
      color: #34E0A6;
    }

    .van-tab--active .van-tab__text {
      color: #13A374;
      font-weight: bold;
    }

    .van-tab {
      align-items: flex-start;
    }

    .van-tabs__nav--line {
      padding-bottom: 15px;
    }

    .van-tabs__wrap--scrollable .van-tab {
      padding: 0 0 0 0;
      margin-right: 28px;
    }

    .van-tabs--line .van-tabs__wrap {
      height: 22px;
      margin-bottom: .24rem;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap2">
      <img src="../images/yunshi.png" class="banner2">

      <div class="wrap3">
        <div class="flex5">
          <span>报告所属人：</span>
          <span class="txt7">{{user.nickName}}</span>
          <img :src="user.gender == 1? img1: img2" class="icon2">
        </div>
      </div>

      <div class="box">
        <van-tabs title-inactive-color="#999" title-active-color="#13A374" line-height="4px" color="#13A374"
          swipeable="true">
          <van-tab v-for="(item,i) in tabList" :key="i">
            <template #title>{{item.time_line}}岁</template>
            <div class="box2" v-for="items in item.data_list">
              <div class="h3">
                <p>{{items.title}}</p>
              </div>
              <p class="txt">{{items.content[0]}}</p>
              <p class="sub-txt2 cl1">宜</p>
              <p class="txt">{{items.content[1]}}</p>
              <p class="sub-txt2 cl2">忌</p>
              <p class="txt">{{items.content[2]}}</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>

    </div>

    <div class="wrap">
      <h3>精选报告推荐</h3>
      <ul>
        <li v-for="(item, i) in rpList">
          <img :src="item.pro_img" alt="">
          <div class="main" @click="router(item.pro_type_sim, item.id)">
            <p class="txt2">{{item.pro_name}}</p>
            <p class="txt3 ellipsis">{{item.pro_desc}}</p>
            <div class="flex">
              <p>{{item.sale_nums}}人购买</p>
              <div class="btn">揭晓答案</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

<script src="https://ad.aicebar.com/public/lib/js/axios.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/comm.js"></script>


</html>